import React from "react";
import ReactDOM from "react-dom/client";

// 创建挂载点容器
const root = ReactDOM.createRoot(document.querySelector("#root"));

const count = 10;
const myClass = "box";

const text =
  '<div><p>我的天</p><button style="color: red;">hello</button></div>';

const obj = {
  id: "id",
  className: "className",
  title: "title",
};

const html = (
  <div>
    <h1 className="box">Hello React</h1>
    <br />
    <label htmlFor="input">姓名</label>
    <input id="input" type="text" />

    <p style={{ color: "red", fontSize: "36px" }}>我的天</p>

    {/* 插值表达式用于标签的属性时，需要去掉双引号 */}
    <button className={myClass}>{count}</button>

    {/* 不转义 html */}
    <div dangerouslySetInnerHTML={{ __html: text }}></div>

    {/* Null、Undefined、布尔值会直接忽略 */}
    <div>{undefined}</div>

    {/* 展开一个对象 */}
    <div {...obj}>看我的属性</div>

    {/* 使用函数来作为子元素 */}
    <div>
      {(() => {
        return "Hello";
      })()}
    </div>
    <div style={{ height: "2000px" }}></div>
  </div>
);

// 渲染容器
root.render(html);
